<script setup>
import { ref, computed } from 'vue';
import { useUserStore } from '@/stores/user.js'
import { PutUserInfoAPI } from '@/api/user.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const form = ref({
  username: userStore.user.username,		//更新的用户名。
  name: userStore.user.username,		//更新前的用户昵称。
  password: '',		//确认密码，如果更新了用户名或密码则需要提供旧密码确认。
  newpassword: '',		//更新的密码。
  bio: userStore.user.bio,	//更新的个性签名。
  avatar: userStore.user.avatar_url,//更新的头像。
  register_time: userStore.user.register_time * 1000,		//获取用户注册时间    因为接口获取的是毫秒，所以要乘1000
})
// console.log(form.value.register_time);
//将时间戳格式转换成年月日时分秒   使用计算属性
const Time = computed(() => {
  if (!form.value.register_time) return '';
  var date = new Date(form.value.register_time); //将时间戳转换成日期对象
  var year = date.getFullYear();  //获取年
  var month = ('0' + (date.getMonth() + 1)).slice(-2); //获取月
  var day = ('0' + date.getDate()).slice(-2);//获取日
  var hours = ('0' + date.getHours()).slice(-2);//获取时
  var minutes = ('0' + date.getMinutes()).slice(-2);//获取分
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
})

const btnCancel1 = () => {
  dialogVisible.value = false
  form.value.password = ''
  form.value.newpassword = ''

}
const btnCancel2 = () => {
  dialogVisible2.value = false
  form.value.password = ''

}
// 更新信息
// 更新信息弹窗
const dialogVisible2 = ref(false) // 控制修改密码弹窗
const putuserinfo = async () => {
  if (form.value.username === form.value.name) {
    const NoInfoUser = form.value
    delete NoInfoUser.username
    await PutUserInfoAPI(NoInfoUser)
  } else {
    await PutUserInfoAPI(form.value)
  }
  ElMessage.success('个人信息修改成功,请重新登陆')
  userStore.token = ''
  userStore.user = {}
  router.replace('/home/login')
}


// 图片上传成功的函数
const uploadSuccess = (upload) => {
  console.log(upload.raw);
  form.value.avatar = upload.raw

}

// 修改密码弹窗
const dialogVisible = ref(false) // 控制修改密码弹窗
const onSubmit = async () => {
  await putuserinfo()
  router.replace('/home/login')
}
</script>

<template>
  <!-- 一行24份 -->
  <el-row class="login-page">
    <!-- :span="8" 此元素占8份  :offset="8" 左边空出8份 -->
    <el-col :span="8" :offset="7" class="form">
      <el-form :model="form" label-width="100px"
        style="  display: flex;   flex-direction: column; align-items: center;">
        <el-form-item>
          <el-upload ref="uploadRef" :auto-upload="false" class="avatar-uploader" :show-file-list="false"
            :on-change="uploadSuccess">
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <!-- 如果没有上传图片就用用户名首个代替 -->
            <el-avatar :size="120" v-else class="username">{{ userStore.user.username?.charAt(0) }}</el-avatar>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <span style="color: #999;">注册于：{{ Time }}</span>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input class="username" placeholder="请输入用户名" style="width: 300px" v-model="form.username" />
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input v-model="form.bio" style="width: 300px" :rows="4" type="textarea" placeholder="请输入个性签名"
            resize='none' />
        </el-form-item>
        <el-form-item>
          <el-button type="success" style="background: #5BBE9E;" @click="dialogVisible2 = true">更新信息</el-button>
        </el-form-item>
        <el-form-item>
          <el-button style="background: #f5f7fa;" @click="dialogVisible = true">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


  <!-- 更新信息弹出窗 -->
  <el-dialog v-model="dialogVisible2" title="修改个人信息" width="30%">
    <el-form :model="formModel" :rules="rules" label-width="100px" style="padding-right: 30px">
      <!--    <el-form-item label="确认密码">
        <el-input type="password" v-model="form.password" placeholder="请输入分类名称">
        </el-input>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="btnCancel2">取消</el-button>
        <el-button type="success" class="button" @click="putuserinfo"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改弹出框 -->
  <el-dialog v-model="dialogVisible" title="修改密码" width="30%">
    <el-form :model="formModel" :rules="rules" label-width="100px" style="padding-right: 30px">
      <el-form-item label="旧密码">
        <el-input type="password" v-model="form.password" placeholder="请输入分类名称">
        </el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input type="password" v-model="form.newpassword" placeholder="请输入分类别名">
        </el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="btnCancel1">取消</el-button>
        <el-button type="success" class="button" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  width: 120px;
  height: 120px;
  margin-top: 20px;
  text-align: center;
  line-height: 100px;

  /*   border-radius: 50%;
  overflow: hidden; */
  .username {
    background: #5BBE9E;
    font-size: 60px;
  }

  :deep() {
    .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }

    .el-upload {
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      text-align: center;

    }
  }
}

.button {
  background: #5bbe9e;
}

.el-dialog__title {
  text-align: center !important;
}
</style>
